<template>
	<!-- 我的 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
		</view>
		<!-- 用户信息 -->
		<view @click="$tool.navTo('/pages/mine/accountCenter')" class="mx-3 userInfo flex">
			<view @click.stop="$tool.goBack()" class="f0 p-3" style="padding-left: 0;">
				<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
			</view>
			<view class="f0 mr-2">
				<image v-if="avatarImg" class="avatar" :src="$tool.changeImg(avatarImg)" mode="aspectFill"></image>
				<image v-else class="avatar" :src="'/static/images/defalutAvatar_'+model+'.png'" mode=""></image>
			</view>
			<view class="flex-1">
				<view class="name A-Medium" :class="model=='light'?'nameLight':''">
					<!-- {{nickname?nickname:mobileNumber?mobileNumber:email}} -->
					{{nickname?nickname:email}}
				</view>
				<view class="flex align-center A-Regular">
					<view class="uid">
						uid:{{mobileUserId}}
					</view>
					<view class="f0">
						<image class="uidCopy" :src="'/static/images/mine/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="flex align-center ids">
					<view class="auth flex align-center" :class="(model=='light'&&passportAuthStatus!=3)?'authLight':''">
						<view class="f0">
							<image v-if="passportAuthStatus!=3" :src="'/static/images/mine/2_'+model+'.png'" mode=""></image>
							<image v-else :src="'/static/images/mine/3_'+model+'.png'" mode=""></image>
						</view>
						<view class="authText" :class="(passportAuthStatus!=3)?model=='light'?'authTextLight':'':'authText2'">
							{{
								passportAuthStatus==0?i18n.m003:
								passportAuthStatus==1?i18n.m042:
								passportAuthStatus==2?i18n.m043:
								passportAuthStatus==3?i18n2.l016:''
							}}
						</view>
					</view>
					<view @click.stop="$tool.navTo('/pages/member/member')" class="vip flex align-center">
						<view class="f0">
							<image :src="'/static/images/mine/4_'+model+'.png'" mode=""></image>
						</view>
						<view class="vipText">
							{{vipClass}}
						</view>
					</view>
				</view>
			</view>
			<view class="right flex align-center">
				<view class="A-Regular goAuth">
					{{(!true)?i18n.m001:''}}
				</view>
				<view class="f0">
					<image class="rightArrow" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜单1 -->
		<view class="mx-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<!-- 精彩活动 -->
			<view @click="$tool.navTo('/pages/index/guessingCompetition')" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/5_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m004}}
					</view>
				</view>
				<view class="content flex-1">

				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 邀请好友 -->
			<!-- /pages/invitationRewards/shareImg -->
			<view @click="$tool.navTo('/pages/invitationRewards/invitationRewards')" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/6_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m005}}
					</view>
				</view>
				<view class="content flex-1">
					{{i18n.m014}}{{inviteCount}}{{i18n.m015}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 邀请奖励 -->
			<view @click="$tool.navTo('/pages/invitationRewards/invitationRecord')" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/7_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m006}}
					</view>
				</view>
				<view class="content flex-1">
					<!-- {{i18n.m016}}{{inviteCount2}}USDT -->
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 经纪人佣金 -->
			<view @click="$tool.navTo('/pages/mine/jjrtdjyls')" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/8_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m007}}
					</view>
				</view>
				<view class="content flex-1">

				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 收货地址 -->
			<view @click="$tool.navTo('/pages/mine/addressList')" class="list py-3 flex align-center mx-3"
				style="border: none;" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/9_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m008}}
					</view>
				</view>
				<view class="content flex-1">

				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜单2 -->
		<view class="mx-3 mt-3 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<!-- 语言切换 -->
			<view @click="openPopup(1)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/10_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m009}}
					</view>
				</view>
				<view class="content flex-1">
					{{langName}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 主题模式 -->
			<view @click="openPopup(2)" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/11_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m010}}
					</view>
				</view>
				<view class="content flex-1">
					{{modelName}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 关于我们 -->
			<view @click="$tool.navTo('/pages/mine/aboutUs')" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/12_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m011}}
					</view>
				</view>
				<view class="content flex-1">

				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 帮助中心 -->
			<view @click="$tool.navTo('/pages/mine/helpCenter')" class="list py-3 flex align-center mx-3" style="border: none;" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/mine/13_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{i18n.m012}}
					</view>
				</view>
				<view class="content flex-1">

				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 退出登录 -->
		<view @click="outlog" class="btn mx-auto A-Regular clickCss" :class="model=='light'?'btnLight':''">
			{{i18n.m013}}
		</view>
		<!-- 语言设置、主题设置 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view class="titleWrap py-4 mx-3 flex align-center justify-between">
					<view class="f0 opacity0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
					<view class="">
						{{popupType==1?i18n.m017:popupType==2?i18n.m026:''}}
					</view>
					<view @click="closePopup" class="f0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
				</view>
				<view @click="confirm(item)" v-if="popupType==2||(popupType==1&&item.value!='Japanese'&&item.value!='Malay'&&item.value!='Hindi'&&item.value!='Korean'&&item.value!='Vietnamese')" v-for="(item,index) in popupList" class="list">
					{{item.name=='英文'?'English':item.name}}
				</view>
				<view class="" style="height: 68rpx;">

				</view>
			</view>
		</uni-popup>
		<modelP :type="2" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		getLanguageList,
		saveOrUpdateLanguage,
		saveOrUpdateTheme,
		logout,
		totalInviteReward
	} from '@/core/api/user.js';
	import {
		inviteCount,
		directInviteCount
	} from '@/core/api/index.js';
	import modelP from '@/components/modelP.vue';
	export default {
		components:{
			modelP
		},
		data() {
			return {
				// 语言
				showLang: false,
				langName: '',
				langList: [],
				// 主题
				showModel: false,
				modelName: '',
				modelList: [{
						id: 1,
						id2: 'dark',
						name: '',
					},
					{
						id: 2,
						id2: 'light',
						name: '',
					}
				],
				// 弹窗列表
				popupType: 1, //1语言 2主题
				popupList: [],
				inviteCount:0,
				inviteCount2:0,
			}
		},
		onLoad() {
			this.initDate();
			this.getLanguageLists();
			directInviteCount({
				mobileUserId:this.mobileUserId
			}).then(res=>{
				this.inviteCount = res.result;
			})
			totalInviteReward({
				mobileUserId:uni.getStorageSync('mobileUserId'),
			}).then(res=>{
				console.log(res,'--------')
				this.inviteCount2 = res.result.totalInviteReward?res.result.totalInviteReward:0;
			})
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			this.$store.dispatch('config/getCustomerInfo');
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			i18n2() {
				return this.$t('last');
			},
			model() {
				return this.$store.state.config.model;
			},
			avatarImg(){
				return this.$store.state.config.avatarImg;
			},
			vipClass() {
				return this.$store.state.config.vipClass;
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
			mobileUserId() {
				return uni.getStorageSync('mobileUserId');
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			nickname(){
				return this.$store.state.config.nickname;
			},
		},
		methods: {
			openPopup(type) {
				this.popupType = type;
				if (type == 1) {
					// 语言设置
					this.popupList = this.langList;
					this._i18n.locale
				} else if (type == 2) {
					// 主题设置
					this.popupList = this.modelList;
				}
				this.$refs.popup.open('bottom');
			},
			closePopup() {
				this.$refs.popup.close();
			},
			confirm(item) {
				this.closePopup();
				this.$tool.showLoading();
				if (this.popupType == 1) {
					// 语言设置
					if(uni.getStorageSync('mobileUserId')){
						saveOrUpdateLanguage({
							mobileUserId:uni.getStorageSync('mobileUserId'),
							language:item.value
						}).then(res=>{
							this._i18n.locale = item.id2;
							this.langName = item.name;
							uni.setStorageSync('locale', item.id2);
							this.confrimAfter();
						}).catch(err=>{
							uni.hideLoading();
						})
					}else{
						this._i18n.locale = item.id2;
						this.langName = item.name;
						uni.setStorageSync('locale', item.id2);
						this.confrimAfter();
					}
				} else if (this.popupType == 2) {
					// 主题设置
					if(uni.getStorageSync('mobileUserId')){
						saveOrUpdateTheme({
							mobileUserId:uni.getStorageSync('mobileUserId'),
							theme:item.id2
						}).then(res=>{
							this.$store.commit("config/set_model", item.id2);
							this.modelName = item.name;
							this.$tool.setStatusBarStyle(this.model);
							uni.setStorageSync('model', item.id2);
							uni.hideLoading();
						}).catch(err=>{
							uni.hideLoading();
						})
					}else{
						this.$store.commit("config/set_model", item.id2);
						this.modelName = item.name;
						this.$tool.setStatusBarStyle(this.model);
						uni.setStorageSync('model', item.id2);
						uni.hideLoading();
					}
				}
			},
			confrimAfter(){
				uni.hideLoading();
				uni.showToast({
					title: '切换成功',
					icon: 'none',
					duration: 800
				})
				setTimeout(res => {
					plus.runtime.restart();
				}, 800)
			},
			initDate() {
				for (let i = 0; i < this.langList.length; i++) {
					if (this.langList[i].id2 == this._i18n.locale) {
						this.langName = this.langList[i].name;
					}
				}
				for (let i = 0; i < this.modelList.length; i++) {
					this.modelList[i].name = this.i18n['m0' + (i + 27)];
					if (this.modelList[i].id2 == this.model) {
						this.modelName = this.modelList[i].name;
					}
				}
			},
			getLanguageLists() {
				getLanguageList().then(res => {
					let list = res.result;
					this.langList = list;
					for (let i = 0; i < this.langList.length; i++) {
						this.langList[i].name = this.langList[i].title;
						this.langList[i].id2 = this.langList[i].value;
						if (this.langList[i].id2 == this._i18n.locale) {
							this.langName = this.langList[i].name;
						}
					}
				})
			},
			outlog(){
				this.$refs.modelP.open();
				// this.$tool.showLoading();
				// uni.hideLoading();
			},
			confrim(){
				uni.removeStorageSync('token');
				uni.removeStorageSync('mobileUserId');
				uni.removeStorageSync('email');
				uni.removeStorageSync('mobileNumber');
				this.$store.commit("config/set_isContinue",false);
				this.$store.commit("config/set_isContinue2",false);
				this.$tool.navTo('/pages/login/login',3);
			}
		}
	}
</script>

<style scoped lang="scss">
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list {
			padding: 22rpx 0;
			margin: 0 66rpx;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}

	// 弹窗---结束
	.userInfo {
		margin-top: 52rpx;
		margin-bottom: 42rpx;

		.avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;

		}

		.name {
			font-size: 32rpx;
			color: #F7F7F7;
		}

		.nameLight {
			color: #0E0F11;
		}

		.uid {
			font-size: 24rpx;
			color: #7F838D;
			margin-right: 12rpx;
		}

		.uidCopy {
			width: 24rpx;
			height: 24rpx;
		}

		.ids {
			margin-top: 16rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		.auth {
			padding: 8rpx 14rpx;
			background: rgba(130, 218, 76, 0.1);
			border-radius: 86rpx;
			border: 2rpx solid rgba(130, 218, 76, 0.1);

			.authText {
				font-size: 20rpx;
				color: #AAACB8;
			}

			.authTextLight {
				color: #7F838D;
			}

			.authText2 {
				color: #82DA4C;
			}
		}

		.authLight {
			background: rgba(127, 131, 141, 0.3);
			border: 2rpx solid rgba(118, 122, 130, 0.3);
		}

		.vip {
			margin-left: 16rpx;
			padding: 8rpx 14rpx;
			background: rgba(255, 180, 31, 0.1);
			border-radius: 86rpx;
			border: 2rpx solid rgba(255, 180, 31, 0.1);

			.vipText {
				font-size: 20rpx;
				color: #FFB41F;
			}
		}

		.right {
			padding-top: 14rpx;

			.goAuth {
				font-size: 24rpx;
				color: #AAACB8;
			}

			.rightArrow {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.menuList {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;

		.list {
			border-bottom: 2rpx solid #1F2128;

			.icon1 {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.title {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.titleLight {
				color: #0E0F11;
			}

			.content {
				font-size: 28rpx;
				color: #7F838D;
				text-align: right;
			}

			.icon2 {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.menuListLight {
		background: #ffffff;
		border: 2rpx solid #F4F4F4;
	}

	.btn {
		width: 690rpx;
		height: 76rpx;
		margin-top: 80rpx;
		background: #16181C;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #000000;
		font-size: 28rpx;
		color: #F7F7F7;
		text-align: center;
		line-height: 72rpx;
	}

	.btnLight {
		background: #B5B7BF;
		border: 2rpx solid #B5B7BF;
	}
</style>